<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" href="../../static/layui/css/layui.css" media="all">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="layui-container" style="width: 1400px;height: 600px;margin-top: 0px;padding-top: 60px;margin-left: 10px">

    <div style="margin-left: 460px; width: 300px;">
        <a href="/account/redirect/index">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp;欢迎回来！
        <!--        <a href="/account/redirect/order" th:text="${session.user.nickname}"></a>-->
        <a href="/account/logout">&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-warm layui-btn-radius">退出</button></a>
    </div>
    <div class="demoTable">
        搜索订单：
        <div class="layui-inline">
            <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <div style="width: 1400px;margin-left: 10px">
        <table class="layui-hide" id="test" lay-filter="test" ></table>
    </div>

    <script th:src="@{/layui/layui.js}" src="../../static/layui/layui.js" charset="utf-8"></script>
    <script type="text/html" id="btn">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="confirm">确认</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>

        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test'
                ,url:'http://localhost:8080/order/findAllOrderByUserId?UserId=1001'
                ,title: '订单列表'
                ,dataType: 'jsonp'
                ,width:'100%'
                ,crossDomain: true
                ,id: 'testReload'
                ,cols: [
                    [
                        {field:'id', width:100,height:300,title: '编号', sort: true}
                        , {
                        field: 'name', width: 200, title: '菜品', templet: function (data) {
                            let result= data.orderItemList[0].menu.name+" "+data.orderItemList[0].number+"个";
                            for(let i = 1; i < data.orderItemList.length; i++) {
                                result = result +","+data.orderItemList[i].menu.name+" "+data.orderItemList[i].number+"个";
                            }
                            return result
                        }
                    }
                        ,{field: 'image', width: 200,title: '图片',align: 'center',sort:false,templet:function (data){
                            return '<div οnclick="photograph(this)"><img src='+data.orderItemList[0].menu.imgUrl+'></div>'
                        }
                    }
                        ,{field: 'price', width: 100, title: '总价', templet: function (data) {
                            return data.totalPrice.toFixed(2)
                        }
                    }
                        ,{field:'flavor', width:100, title: '描述',templet:function(data){
                            return data.orderItemList[0].menu.description
                        }
                    }
                        ,{field:'date',width:300,  title: '下单时间',templet:function (data) {
                            return data.timestamp
                        }
                    }
                        ,{field:'state', width:100, title: '订单状态',templet:function(data){
                            return data.state
                        }
                    },
                        {field: 'shopName',width: 100, title: '商店名',templet:function (data){
                                return data.admin.shopName
                            }
                        },
                        {field: 'button', title: '操作', width:200, toolbar:"#btn"}
                    ]
                ]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                let data = obj.data;
                if(obj.event === 'detail'){
                    window.location.href="orderDetail.html?orderId="+data.id+"&userId="+data.user.id;
                }
                if (obj.event == 'confirm'){
                    layer.confirm('确认订单已完成',function(index){
                        let url = "http://localhost:8080/order/confirmOrder?userId=1001&orderId="+data.id;
                        ajaxconfirm(url);
                        layer.close(index);
                        window.location.reload();
                    });
                }
                if (obj.event == 'del'){
                    layer.confirm('确认订单已删除',function(index){
                        let url = "http://localhost:8080/order/deleteOrder?userId=1001&orderId="+data.id;
                        ajaxdel(url);
                        layer.close(index);
                        window.location.reload();
                    });
                }
            });
            $('.layui-btn').click(function () {
                var inputVal = $('.layui-input').val()
                table.reload('testReload', {
                    url: 'http://localhost:8080/order/findAllOrderByMenuName?UserId=1001&MenuName='+inputVal
                    ,methods:"get"
                    ,request: {
                        pageName: 'page' //页码的参数名称，默认：page
                        ,limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
                    ,where: {
                        query : inputVal
                    }
                    ,page: {
                        curr: 1
                    }
                });
            })
        });
        function ajaxconfirm(url){
            $.ajax({
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                url:url,
                type:"PUT"
            });
        };
        function ajaxdel(url){
            $.ajax({
                url: url,
                type: "DELETE",
                contentType: "application/json;"
            });
        }
    </script>

</div>
<script>
    //二级菜单联动
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>